import React, { useState, useContext } from "react";
import QuestionnaireContext from "../../context/questionnaire/QuestionnaireContext";
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  ScrollView,
  Alert,
  ActivityIndicator,
  Modal,
} from "react-native";
import ShowChoiceQues from "../../components/showSubject/showChoiceQues";
import ShowEssayQues from "../../components/showSubject/ShowEssayQues";
import ShowCompletion from "../../components/showSubject/ShowCompletion";
import ShowComplexQues from "../../components/showSubject/ShowComplexQues";
import { FontAwesome } from "@expo/vector-icons";

const Loading = ({ text }) => {
  return (
    <View style={styles.alterView}>
      <ActivityIndicator animating={true} size={"large"} color="#ddd" />
      <Text style={{ color: "#ccc", marginTop: 10 }}>{text}</Text>
    </View>
  );
};

const Error = () => {
  <View style={styles.alterView}>
    <Text style={{ color: "#ccc", marginTop: 10 }}>出错了...</Text>
  </View>;
};

const AddQuestionnaire = ({ navigation }) => {
  const { quesLoading, QuesData, getQues, postNewQues, updateQues } =
    useContext(QuestionnaireContext);

  const [isEditing, setIsEditing] = useState(false);

  const updateQuesAlter = () => {
    Alert.alert("", "是否更新问卷？", [
      {
        text: "取消",
      },
      {
        text: "确定",
        onPress: () => handleUpdateQues(),
      },
    ]);
  };
  const handleUpdateQues = async () => {
    setIsEditing(true);
    try {
      await updateQues();
      Alert.alert("更新问卷模板成功");
    } catch (error) {
      console.log(error);
      Alert.alert("更新问卷模板失败");
    }
    setIsEditing(false);
    navigation.goBack();
  };

  React.useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <TouchableOpacity
          onPress={() => {
            updateQuesAlter();
          }}
        >
          <View style={{ marginRight: 10 }}>
            <FontAwesome name="save" size={22} color="#fff" />
          </View>
        </TouchableOpacity>
      ),
    });
  }, [navigation]);

  return (
    <View style={styles.container}>
      {quesLoading == "ing" ? (
        <Loading text="Loading..."></Loading>
      ) : (
        <View>
          <ScrollView>
            <View>
              {QuesData.body.map((content, index1) => {
                return (
                  <View key={index1}>
                    <TouchableOpacity
                      onPress={() =>
                        navigation.navigate("添加题目组", {
                          groupIndex: index1,
                          groupData: content,
                          isAdd: false,
                        })
                      }
                    >
                      <View
                        style={{
                          height: 15,
                          backgroundColor: "#eee",
                          paddingTop: 15,
                          marginBottom: 7,
                        }}
                      ></View>
                      <View
                        style={{
                          marginTop: 10,
                          alignItems: "center",
                          marginBottom: 10,
                        }}
                      >
                        <Text style={{ fontSize: 16, fontWeight: "bold" }}>
                          {String.fromCharCode(index1 + 65) +
                            "  " +
                            content.head}
                        </Text>
                      </View>
                      {content.contents.map((question, index) => {
                        if (question.type == 1) {
                          return (
                            <View key={index}>
                              <View
                                style={{
                                  height: 5,
                                  backgroundColor: "#f8f8f8",
                                }}
                              ></View>
                              <ShowEssayQues
                                isEdit={false}
                                number={
                                  String.fromCharCode(index1 + 65) + (index + 1)
                                }
                                QuesContent={question}
                              ></ShowEssayQues>
                            </View>
                          );
                        }
                        if (question.type == 2 || question.type == 3) {
                          return (
                            <View key={index}>
                              <View
                                style={{
                                  height: 5,
                                  backgroundColor: "#f8f8f8",
                                }}
                              ></View>
                              <ShowChoiceQues
                                isEdit={false}
                                number={
                                  String.fromCharCode(index1 + 65) + (index + 1)
                                }
                                QuesContent={question}
                              ></ShowChoiceQues>
                            </View>
                          );
                        }
                        if (question.type == 4) {
                          return (
                            <View key={index}>
                              <View
                                style={{
                                  height: 5,
                                  backgroundColor: "#f8f8f8",
                                }}
                              ></View>
                              <ShowCompletion
                                isEdit={false}
                                number={
                                  String.fromCharCode(index1 + 65) + (index + 1)
                                }
                                QuesContent={question}
                              ></ShowCompletion>
                            </View>
                          );
                        }
                        if (question.type == 5) {
                          return (
                            <View key={index}>
                              <View
                                style={{
                                  height: 5,
                                  backgroundColor: "#f8f8f8",
                                }}
                              ></View>
                              <ShowComplexQues
                                isEdit={false}
                                number={
                                  String.fromCharCode(index1 + 65) + (index + 1)
                                }
                                QuesContent={question}
                              ></ShowComplexQues>
                            </View>
                          );
                        }
                      })}
                    </TouchableOpacity>
                  </View>
                );
              })}
            </View>
          </ScrollView>
          <View>
            <View style={styles.btnBox}>
              <TouchableOpacity
                style={styles.backBtn}
                onPress={() =>
                  navigation.navigate("添加题目组", {
                    groupIndex: -1,
                    groupData: { type: 0, head: "", contents: [] },
                    isAdd: true,
                  })
                }
              >
                <Text style={{ color: "#41C3EE" }}>添加题目组</Text>
              </TouchableOpacity>
            </View>
          </View>
        </View>
      )}
      {quesLoading == "error" ? <Error></Error> : null}
      <Modal animationType="fade" transparent={true} visible={isEditing}>
        <Loading text="更新中"></Loading>
      </Modal>
    </View>
  );
};

var styles = StyleSheet.create({
  container: {
    // marginTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
    height: "100%",
    backgroundColor: "white",
  },
  ModalBackground: {
    backgroundColor: "#727272",
    opacity: 0.3,
    zIndex: 0,
    position: "absolute",
    width: "100%",
    height: "100%",
  },
  ModalStyle: {
    borderTopLeftRadius: 10,
    borderTopRightRadius: 10,
    backgroundColor: "#ffffff",
    zIndex: 1,
    position: "relative",
  },
  ModalTop: {
    flex: 1,
  },
  modalOption: {
    // backgroundColor: "yellow",
    width: "100%",
    padding: 15,
    borderBottomWidth: 0.5,
    borderBottomColor: "#e6e6e6",
  },
  modalText: {
    alignSelf: "center",
    fontSize: 16,
    color: "#201D1D",
  },
  backBtn: {
    flex: 3.7,
    borderWidth: 1,
    borderColor: "#41C3EE",
    // alignContent: "center",
    // justifyContent: "center",
    alignItems: "center",
    padding: 10,
    borderRadius: 5,
  },
  submitBtn: {
    flex: 5.7,
    marginLeft: "6%",
    backgroundColor: "#41C3EE",
    alignItems: "center",
    padding: 10,
    borderRadius: 5,
  },
  btnBox: {
    flexDirection: "row",
    marginLeft: "5%",
    marginRight: "5%",
    marginTop: 20,
    marginBottom: 15,
  },
  alterView: {
    height: "100%",
    alignItems: "center",
    justifyContent: "center",
  },
});

export default AddQuestionnaire;
